<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-alert
      message="全校挪课操作会影响所有课程安排，请谨慎操作！"
      type="warning"
      showIcon
      style="margin-bottom: 20px"
    />

    <a-form-item label="挪课类型" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-radio-group v-decorator="['moveType', {initialValue: 'week'}]">
        <a-radio value="week">按周挪动</a-radio>
        <a-radio value="date">指定日期挪动</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item 
      label="选择周次" 
      :labelCol="{span: 4}" 
      :wrapperCol="{span: 18}"
      v-if="form.getFieldValue('moveType') === 'week'"
    >
      <a-select
        v-decorator="['weekOffset', {rules: [{required: form.getFieldValue('moveType') === 'week', message: '请选择周次'}]}]"
        placeholder="请选择要挪动的周次"
      >
        <a-select-option value="current">当前周</a-select-option>
        <a-select-option value="next">下一周</a-select-option>
        <a-select-option value="-1">往前挪1周</a-select-option>
        <a-select-option value="1">往后挪1周</a-select-option>
        <a-select-option value="2">往后挪2周</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item 
      label="选择日期" 
      :labelCol="{span: 4}" 
      :wrapperCol="{span: 18}"
      v-if="form.getFieldValue('moveType') === 'date'"
    >
      <a-range-picker
        v-decorator="['dateRange', {rules: [{required: form.getFieldValue('moveType') === 'date', message: '请选择日期范围'}]}]"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="挪动方向" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-radio-group v-decorator="['direction', {initialValue: 'after'}]">
        <a-radio value="before">提前到节假日之前</a-radio>
        <a-radio value="after">延后到节假日之后</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="节假日设置" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-select
        v-decorator="['holiday', {rules: [{required: true, message: '请选择节假日'}]}]"
        placeholder="请选择节假日"
      >
        <a-select-option value="national">国庆节</a-select-option>
        <a-select-option value="spring-festival">春节</a-select-option>
        <a-select-option value="labor-day">劳动节</a-select-option>
        <a-select-option value="custom">自定义节假日</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item 
      label="自定义日期" 
      :labelCol="{span: 4}" 
      :wrapperCol="{span: 18}"
      v-if="form.getFieldValue('holiday') === 'custom'"
    >
      <a-date-picker
        v-decorator="['customHoliday', {rules: [{required: form.getFieldValue('holiday') === 'custom', message: '请选择日期'}]}]"
        style="width: 100%"
      />
    </a-form-item>

    <a-form-item label="处理方式" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-checkbox-group v-decorator="['options', {initialValue: ['adjustExam']}]">
        <a-checkbox value="adjustExam">自动调整考试时间</a-checkbox>
        <a-checkbox value="adjustActivity">自动调整活动时间</a-checkbox>
        <a-checkbox value="notifyAll">发送全体通知</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item label="备注说明" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
      <a-textarea
        v-decorator="['remark']"
        placeholder="请输入备注说明"
        :rows="3"
      />
    </a-form-item>

    <a-form-item :wrapperCol="{span: 18, offset: 4}">
      <a-button type="primary" html-type="submit">提交挪课</a-button>
      <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
      <a-button style="margin-left: 10px" @click="handlePreview" type="dashed">预览影响</a-button>
    </a-form-item>

    <a-modal
        :visible="previewVisible"
        title="全校挪课预览"
        width="800px"
        @cancel="previewVisible = false"
        :footer="null"
      >
	  <template v-if="previewData">
        <a-alert
          :message="`本次挪课将影响 ${previewData.affectedCourses} 门课程，${previewData.affectedTeachers} 位教师`"
          type="warning"
          show-icon
          style="margin-bottom: 20px"
        />
        
        <a-table
          :columns="previewColumns"
          :dataSource="previewData.details"
          rowKey="date"
          :pagination="false"
        />
        
        <div class="action-buttons" style="margin-top: 20px; text-align: right">
          <a-button @click="previewVisible = false">取消</a-button>
          <a-button type="primary" @click="handleConfirmMove" style="margin-left: 10px">
            确认执行挪课
          </a-button>
        </div>
		</template>
      </a-modal>
  </a-form>
</template>

<script>
export default {
  components: {
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      previewVisible: false,
      previewData: {
           affectedCourses: 0,
           affectedTeachers: 0,
           details: []
         },
	   previewColumns: [
	          {
	            title: '日期',
	            dataIndex: 'date'
	          },
	          {
	            title: '操作',
	            dataIndex: 'action'
	          },
	          {
	            title: '影响课程数',
	            dataIndex: 'courses'
	          }
	        ],
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('全校挪课表单值: ', values)
          this.$emit('submit', values)
        }
      })
    },
    handleReset() {
      this.form.resetFields()
    },
    handlePreview() {
      this.form.validateFields((err, values) => {
          if (!err) {
            this.previewData = this.generatePreviewData(values) || {
              affectedCourses: 0,
              affectedTeachers: 0,
              details: []
            };
            this.previewVisible = true;
          }
        });
    },
	// 改进确认方法
	    handleConfirmMove() {
	      this.$confirm({
	        title: '确认执行全校挪课',
	        content: '此操作将影响全校课程安排，是否继续？',
	        onOk: () => {
	          this.previewVisible = false
	          this.handleSubmit({ preventDefault: () => {} })
	          this.$message.success('全校挪课操作已提交')
	        }
	      })
	    },
    generatePreviewData(formData) {
      // 模拟生成预览数据
      return {
        affectedCourses: 156,
        affectedTeachers: 48,
        conflictExams: 5,
        details: [
          { date: '2024-09-29', action: '提前到09-28', courses: 42 },
          { date: '2024-10-04', action: '延后到10-07', courses: 38 }
        ]
      }
    }
  }
}
</script>